<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                  <div class="datale">
                    <div class="borebon sonh_g">
                      <ul>
                        <span>账户信息</span>
                        <li><router-link to="/bu101">账户信息</router-link></li>
                        <li><router-link to="/bu102">创建子账号</router-link></li>
                        <li><router-link to="/bu103">权限管理</router-link></li>
                        <li><router-link to="/bu104">账号安全</router-link></li>
                      </ul>
                    </div>
                  </div>
                <div class="datare">
                    <div class="ra">账户安全</div>
                    <div class="toxian">店铺基本信息</div>
                    <el-form ref="form" :label-position="labelPosition" label-width="100px" style="margin-top: 20px;margin-left: 20px;">
                        <el-form-item label="*店铺名称：">
                            <el-col :span="10">
                                <el-input
                                    type="text"
                                    placeholder="请输入内容"
                                    v-model="value"
                                    maxlength="10"
                                    show-word-limit
                                    >
                                </el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="*主营类目：" style="margin-bottom:0px">
                            <el-col>
                                <el-radio v-model="radio" label="1">普通商品</el-radio>
                                <el-radio v-model="radio" label="2">虚拟商品</el-radio>
                                <el-radio v-model="radio" label="3">医药商品</el-radio>
                            </el-col>
                        </el-form-item>
                        <p style="margin-left:20px">一个店铺只能选择一个主营类目不可修改</p>
                        <div class="toxian" style="margin-bottom:10px">开店人基本信息</div>
                        <el-form-item label="*上次证件：">
                            <el-col>
                                <el-button>电脑上传</el-button>
                                <el-button>微信上传</el-button>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="*身份证像：">
                            <el-col :span="6">
                                <el-upload
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                style="    width: 120px;border: solid 1px rgb(220,220,220);">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-col>
                            <el-col :span="6">
                                <el-upload
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                style="    width: 120px;border: solid 1px rgb(220,220,220);">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-col>
                        </el-form-item>
                        <el-checkbox>我已阅读并同意《平台合作协议》</el-checkbox>
                        <el-button style="display:block;margin:10px auto" type="danger">修改信息</el-button>
                    </el-form>
                    

                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import coreF from '@/components/coreF'
export default {
    components: { 
    merchantHeader,
    Footer,
    coreF
    },
    data() {
      return {
        value:"",
        labelPosition:'right',
        radio:"1",
        imageUrl: ''
      }
      
    },
    methods: {
       handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
    },
}
</script>
<style scoped>
.datare /deep/  .el-tabs__nav {margin-left: 60px}
.datare /deep/ .el-tabs__item.is-active {color: #f06048;}
.datare /deep/ .el-tabs__active-bar {color: #f06048;}
.datare /deep/ .el-tabs__item:hover {color: #f06048;}
.datare /deep/ .el-tabs__active-bar {background-color:#f06048 }
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.datale .router-link-exact-active {
  color: #ff9381;
}
.datale a:hover{
  color: #ff9381;
}
.datale {
  width: 216px;
	background-color: #ffffff;
	border-radius: 6px;
  height: 200px;
}   
.borebon {
  border-bottom: 12px solid #eee;
}
.borebon ul{
  display: inline-block;
  margin-left: 20px;
  
}
.borebon ul span{
  font-size: 24px;
	font-weight: 550;
	font-stretch: normal;
	line-height: 32px;
	letter-spacing: 0px;
	color: #313131;
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}
.borebon ul li {
      width: 146px;
    line-height: 34px;
    font-size: 15px
}
.ontoi .datale .sonh_g li{
  width: 120px;
}  
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  height: 635px;
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}

.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px 
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.toxian {
    margin-top: 23px;
    font-size: 17px;
    text-indent: 62px;
    border-bottom: solid 1px rgb(220,220,220);
    padding: 10px 0px;
}

/* 上传头像 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>